<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
	{% include 'common-css/css.html' %}
	<link href="{{ STATIC_URL }}common/login.css" rel="stylesheet" type="text/css"/>
	<title>注册</title>
	<style type="text/css">
		.btn-register {
			padding: 10px 16px;
			border-radius: 10px;
			float: right;
		}

		a:hover {
			text-decoration: none;
		}

		.div-top {
			margin-top: 20px;
		}
		.form-div {
			height: 400px;
		}
	</style>
</head>
<body>
<div class="form-div layui-main">
	<blockquote class="layui-elem-quote" style="font-size: 20px">yzw_blog 后台系统</blockquote>
	<div style="padding: 0 60px 0 60px;">
		{% csrf_token %}
		<div class="input-group div-top" style="margin-top: 30px">
			<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
			<input type="text" class="form-control" id="phone" placeholder="请输入手机号">
		</div>
		<div class="input-group div-top">
			<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
			<input type="text" class="form-control" id="name" placeholder="请输入昵称">
		</div>
		<div class="input-group div-top">
			<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
			<input type="password" class="form-control" id="password" placeholder="请输入密码">
		</div>
		<div class="input-group div-top">
			<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
			<input type="password" class="form-control" id="re_password" placeholder="请再次输入密码">
		</div>
		<div class="layui-row layui-form div-top">
			<div class="layui-col-md3" style="margin-top: 10px;">
				<a href="/login" style="color: #999999;"> 直接登录</a>
			</div>
			<div class="layui-col-md9">
				<button id="register" class="btn-register">注 册 <i class="glyphicon glyphicon-share-alt"></i></button>
			</div>
		</div>
		<div class="div-top">
			<p style="color: red;">注：注册成功需管理员审核</p>
		</div>
	</div>
</div>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['form'], function () {
		$('#register').on('click', function () {
			var phone = $('#phone').val();
			var password = $('#password').val();
			var re_password = $('#re_password').val();
			var name = $('#name').val();

			if (!(/^1[34578]\d{9}$/.test(phone))) {
				layer.msg('手机号有误', {offset: '183px'});
				$('#phone').val('');
				return false;
			}

			if (name == ""){
				layer.msg('请输入昵称', {offset: '183px'});
				return false;
			}
			if (name.length > 5){
				layer.msg('昵称长度不能大于5个字', {offset: '183px'});
				return false;
			}
			if (password == "") {
				layer.msg('请输入密码', {offset: '183px'});
				return false;
			}
			if (password.length <=5 || password.length > 8){
				layer.msg('密码长度为6-8位', {offset: '183px'});
				$('#password').val('');
				return false;
			}
			if (password != re_password){
				layer.msg('两次输入的密码不一致', {offset: '183px'});
				$('#password').val('');
				$('#re_password').val('');
				return false;
			}
			$.ajax({
				type: 'post',
				url: '/handle_register',
				dataType: 'json',
				data: {phone: phone, password: password, name: name},
				success: function (data) {
					layer.msg(data.msg,{offset: '183px'});
					if (data.msg == '注册成功'){
						window.location.href = '/index';
					}else {
						$('#phone').val('');
						$('#password').val('');
						$('#re_password').val('');
					}
				}
			});
		})
	})
</script>
</body>
</html>